import { FormField, FieldRenderer } from '../types'
import { escapeForHtml, generateRequiredAttr, generatePlaceholderAttr } from '../utils/htmlUtils'

export class TextareaFieldRenderer implements FieldRenderer {
  render(field: FormField): string {
    const requiredAttr = generateRequiredAttr(field.required)
    const placeholder = generatePlaceholderAttr(field.placeholder)

    return `
      <div class="form-group">
          <label class="form-label" for="${field.id}">
            ${escapeForHtml(field.label)} ${field.required ? '*' : ''}
          </label>
          <textarea
              id="${field.id}"
              name="${field.id}"
              class="form-input"
              ${placeholder}
              ${requiredAttr}
          ></textarea>
          ${field.hint ? `<div class="markdown-hint">${escapeForHtml(field.hint)}</div>` : ''}
      </div>
    `
  }

  getValidationScript(field: FormField): string {
    return `
      const ${field.id} = document.getElementById('${field.id}').value.trim();
      formData.${field.id} = ${field.id};
      log('${field.label}长度: ' + ${field.id}.length);
      ${field.required ? `if (!${field.id}) { isValid = false; }` : ''}
    `
  }
}
